header {
    background-image: url('images/hero.jpg');
    background-size: cover;
    background-position: center;
    height: 50vh;
    text-align: center;
    color: white;
    position: relative;
}

    header a{
        font-size: 32px;
        font-family:'Indie Flower';
    }

    .textintro{
        position: absolute;
        height: 50vh;
        align-content: center;
        width: 100%;
    }
    
.textintro h1 {
    font-family:'Indie Flower';
    font-weight: 100;
    text-align: center;
    margin-top: 5%;
    color: white;
    position: relative;
}
.arrondie {
    width: 300px; /* Définissez la largeur souhaitée pour l'image */
    height: 300px; /* Définissez la hauteur souhaitée pour l'image */
    border-radius: 50%; /* Pour rendre l'image parfaitement circulaire */
    object-fit: cover; /* Pour s'assurer que l'image ne se déforme pas */
    z-index: 1;
    position: relative;
}
main{
    margin: 20px 0;
}
section{
    text-align: -webkit-center;
}
.activiteleft p{
    text-align: right;
}
.activite p{
    text-align: left;
}
.activite,.activiteleft{    
    align-items: center;    
    display: flex;
}
@media (max-width: 1000px) {
    .activiteleft {
        flex-direction: column-reverse;
        width: 100%;
    }
    .activite{
        flex-direction: column;
        width: 100%;
    }
    
    .activite .text {
        right: 0;        
        border-right: solid 4px;
        border-left: solid 4px; 
        width: 90%;
    }
    
    .activiteleft .text {        
        border-right: solid 4px;
        border-left: solid 4px;
        left: 0;
        width: 90%;
    }
    .textintro h1 {
        font-size: 4em;
    }
}
@media (min-width: 1000px) {
    .textintro h1 {
        font-size: 6em;
    }
    .activite,.activiteleft {
        width: 70%;
        justify-content: center;
    }
    
    .activite .text {        
        border-bottom: solid 4px;
        border-left: solid 4px;
        right: -45px;
        width: 60%;
    }
    
    .activiteleft .text {        
        border-bottom: solid 4px;
        border-right: solid 4px;
        left: -45px;
        width: 60%;
    }
}
.activite .text{
    padding: 25px;
    border-radius: 10px;
    position: relative;
    padding-right: 5%;
    background-color: white;
}
.activiteleft .text{
    padding: 25px;
    padding: 25px;
    border-radius: 10px;
    padding-left: 5%;
    position: relative;
    text-align: right;
    background-color: white;
}
.activiteleft h2{
    text-align: center;
}
.fleche{
    position: absolute;
    z-index: 2;
    width: 8%;
    background-color: #ffffffcc;
    padding: 6px;
    border-radius: 20px;
    height: 200px;
}
.flecheleft{
    left: 0;
}
.flecheright{
    right: 0;
    rotate: 180deg;
}
.carrousel{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}